<!DOCTYPE html>
<html>
<%- include('../components/head.ejs'); %>
<body>
<style type="text/css">
    *{margin:0;padding:0;list-style-type:none;}
    a,img{border:0;}
    body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

    .addWrap{ position:relative; width:100%;background:#fff;margin:0; padding:0;}
    .addWrap .swipe{overflow: hidden;visibility: hidden;position:relative;}
    .addWrap .swipe-wrap{overflow:hidden;position:relative;}
    .addWrap .swipe-wrap > div {float: left;width: 100%;position:relative;}
    #position{ position:absolute; bottom:0; right:0; padding-right:8px; margin:0; background:#000; opacity: 0.4; width:100%; filter: alpha(opacity=50);text-align:right;}
    #position li{width:10px;height:10px;margin:0 2px;display:inline-block;-webkit-border-radius:5px;border-radius:5px;background-color:#AFAFAF;}
    #position li.cur{background-color:#FF0000;}
    .img-responsive { display: block; max-width:100%;height: auto;}
</style>

<!--<div id="slider-wrap" class="banner">-->
    <!--<ul id="slider">-->
        <!--<li><a href="#"><img src="/images/small/carousel-1_small.jpg" alt=""></a></li>-->
        <!--<li><a href="#"><img src="/images/small/carousel-2_small.jpg" alt=""></a></li>-->
        <!--<li><a href="#"><img src="/images/small/carousel-3_small.jpg" alt=""></a></li>-->
    <!--</ul>-->
    <!--<ul id="pagination-wrap">-->
    <!--</ul>-->
    <!--<i id="previous" class="left"></i><i id="next" class="right"></i>-->
<!--</div>-->

<div class="addWrap">
    <div class="swipe" id="mySwipe">
        <div class="swipe-wrap">
            <div><a href="javascript:;"><img class="img-responsive" src="/images/small/carousel-1_small.jpg"/></a></div>
            <div><a href="javascript:;"><img class="img-responsive" src="/images/small/carousel-2_small.jpg" /></a></div>
            <div><a href="javascript:;"><img class="img-responsive" src="/images/small/carousel-3_small.jpg"/></a></div>
        </div>
    </div>

    <ul id="position">
        <li class="cur"></li>
        <li></li>
        <li></li>
    </ul>
</div><!--/addWrap-->

<%- include('../components/header.ejs'); %>
<!--main-->
<main>
    <div class="container">
        <center class="lyh-moto" style="margin: 40px 0;color: #00005A;">
            <h1>一份关于惠州文化的温情记忆</h1>
            <h3 class="lyh-mid-title">始创于 1996</h3>
        </center>
        <img src="" alt="">
        <!--<h3 style="text-align: center">2018全新月饼上市</h3>-->
        <%- include('../components/mooncake-panel.ejs'); %>
        <div class="seperate"></div>
        <div class="product-section-1" style="margin-top:14px">
            <div class="row">
                <a href="/detail?id=2" class="col-sm-6">
                    <img class="lazyload lazyImg img-responsive"
                         data-src="/data/images/chaomibing.png"
                         alt="炒米饼">
                </a>
                <a href="/detail?id=6" class="col-sm-6">
                    <img class="lazyload lazyImg img-responsive"
                         data-src="/data/images/huaishangao.png"
                         alt="淮山冰糕">
                </a>
            </div>
            <div class="row" style="margin-top: 14px">
                <a href="" class="col-sm-3 col-xs-6">
                    <img class="lazyload lazyImg img-responsive"
                         data-src="/data/images/wuguzaliang.png"
                         alt="五谷杂粮">
                </a>
                <a href="" class="col-sm-3 col-xs-6">
                    <img class="lazyload lazyImg img-responsive"
                         data-src="/data/images/zaliangsu.png"
                         alt="杂粮酥">
                </a>
                <a href="" class="col-sm-3 col-xs-6">
                    <img class="lazyload lazyImg img-responsive"
                         data-src="/data/images/hongtanghetaobing.png"
                         alt="红糖核桃饼">
                </a>
                <a href="" class="col-sm-3 col-xs-6">
                    <img class="lazyload lazyImg img-responsive"
                         data-src="/data/images/gouqichenpiruangao.png"
                         alt="枸杞陈皮软糕">
                </a>
            </div>
        </div>
        <!-- 尚德创新 -->
        <div class="origin-pad" style="margin-top: 20px">
            <div class="row">
                <div class="col-xs-1"><h3 style="margin-top: 0;margin-left: 0;writing-mode: vertical-rl">尚德 • 创新</h3></div>
                <div class="col-xs-9 col-sm-10">
                    <p style="text-indent: 2em;margin-top: 2.5em;font-size: 1.3em">
                        每个人心底都有一块饼，让你暗自揣摩它的滋味。美食带来的快乐，有很香很香的愉悦。半生闯荡，一路相随的除了相濡以沫的家人朋友，还有家乡的味道。怡和，意在悦食和众。我们希望用自己的努力来满足每一位客户。
                    </p>
                    <p style="text-indent: 2em;font-size: 1.3em">
                    </p>
                </div>
                <div class="col-xs-2 col-sm-1">
                    <img src="/images/luoyihe-origin.png" width="90%" alt="羅怡和-源起">
                </div>
            </div>
        </div>
        <!-- product-section-2 -->
        <div class="product-section-2" style="margin-top: 14px">
            <div class="row">
                <a href="" class="col-sm-6">
                    <img class="lazyload lazyImg img-responsive"
                         data-src="/data/images/zhimatang.png"
                         alt="芝麻糖">
                </a>
                <a href="" class="col-sm-6">
                    <img class="lazyload lazyImg img-responsive"
                         data-src="/data/images/heizhimahuashengtang.png"
                         alt="花生酥">
                </a>
            </div>
        </div>
        <div style="min-height:460px;margin-top: 14px;background-color: #f0ad4e">
            <div style="width: 384px;height: 108px;margin-left: 8px;background-image: url('/images/mihuatang-title.png')">
                <a href="/list?catagory=米花糖"
                   style="display: inline-block;float: right;width: 70px;height: 64px;margin: 42px 19px 0 0;background: url('/images/mihuatang-title.png') no-repeat -387px 0"></a>
            </div>
            <div class="area-wrap row" style="margin-top: 18px;padding: 0 15px;">
                <div class="col-xs-2">
                    <a href="">
                        <img class="lazyload lazyImg img-responsive" data-src="/data/images/tongxinfen/index.jpg" alt="">
                    </a>
                </div>
                <div class="col-xs-2">
                    <a href="">
                        <img class="lazyload lazyImg img-responsive" data-src="/data/images/baonuomi/index.jpg" alt="">
                    </a>
                </div>
                <div class="col-xs-2">
                    <a href="">
                        <img class="lazyload lazyImg img-responsive" data-src="/data/images/misitang/index-zhima.jpg" alt="">
                    </a>
                </div>
                <div class="col-xs-2">
                    <a href="">
                        <img class="lazyload lazyImg img-responsive" data-src="/data/images/misitang/index.jpg" alt="">
                    </a>
                </div>
                <div class="col-xs-2">
                    <a href="">
                        <img class="lazyload lazyImg img-responsive" data-src="/data/images/maixiangsu/index.jpg" alt="">
                    </a>
                </div>
                <div class="col-xs-2">
                    <a href="">
                        <img class="lazyload lazyImg img-responsive" data-src="/data/images/wuguzaliang/index.jpg" alt="">
                    </a>
                </div>
            </div>
        </div>
    </div>
</main>
<img class="lazyload lazyImg img-responsive"
     data-src="/images/huizhou-impression.png"
     style="margin-top: 20px;"
     title="美食惠州"
     alt="惠州印象" width="100%" height="550px">
<%- include('../components/footer.ejs'); %>
<script src="/plugins/jquery-1.12.4.min.js"></script>
<script src='plugins/hhSwipe.js' type="text/javascript"></script>
<script src="plugins/jquery_carousel_slider.js"></script>
<script type="text/javascript">
    var bullets = document.getElementById('position').getElementsByTagName('li');
    var banner = Swipe(document.getElementById('mySwipe'), {
        auto: 4000,
        continuous: true,
        disableScroll:false,
        callback: function(pos) {
            var i = bullets.length;
            while (i--) {
                bullets[i].className = ' ';
            }
            bullets[pos].className = 'cur';
        }
    })
    var swipImgs = document.getElementsByClassName('swipe-wrap')[0].getElementsByClassName('img-responsive');
    var deviceWidth = document.body.clientWidth;
    for(var i=0;i<swipImgs.length;i++){
        swipImgs[i].style.height = deviceWidth*0.488 + 'px';
    }
</script>
<script type="text/javascript">
    $(function(){
        /*
        * 月饼图片滑动模块
        * **/
        $.getJSON("JSON/data.js",function (result){
            var setting = {
                subject:'2018怡和月饼上市',
                cardw : 400,	//page card's width .
                cardh : 400,
                cardn : 3,		//the number of visible page card .
                margin : 9,		//margin between cards .
                JSON :result
            };
            $('#nba').slider(setting);
        });
    });
</script>
</body>
</html>
